.Dropdown {
  width: 100%;
  height: @action;
  position: relative;

  select {
    width: 100%;
    opacity: 0;
    z-index: 1;
    height: @action;
    position: absolute;

    &:focus {
      outline: 0;

      ~ .Dropdown--value span {
        border-color: @BLUE;
      }
    }
  }

  &--arrow {
    display: inline-block;
    width: @action;
    height: @action;
    position: absolute;
    right: 0;
    top: 0;
    transition: all .3s;
    color: @border-color;
    line-height: @action * .8;
    background-color: @shadow-color;
    border: 1px solid @border-color;
    border-left: 0;
    border-radius: 0 @radius @radius 0;

    &:before {
      text-align: center;
      content: '☰';
      width: @action - 2px;
      font-size: 20px;
      font-weight: 100;
      line-height: 38px;
      position: absolute;
    }

    ~ select { z-index: 1; }
  }

  &--value {
    background-color: @background-color;
    position: absolute;
    height: @action;
    top: 0;
    left: 0;
    right: @action;

    span, input {
      height: @action;
      padding: 0 5px;
      color: @color;
      transition: all .3s;
      line-height: @action;
    }

    input {
      z-index: 2;
      width: 100%;
      position: relative;
      background-color: transparent;

      &:focus { border: 1px solid @BLUE; }

      &.-new { padding-right: 2.8em; }
      &.-edit { padding-right: 6.2em; }
      &.-remove { padding-right: 3.6em; }
    }

    span, input {
      border: 1px solid @border-color;
      border-radius: @radius 0 0 @radius;
    }
  }

  &--actions {
    visibility: hidden;
    position: absolute;
    transition: all .3s;
    z-index: 2;
    opacity: 0;
    padding: 0 5px;
    right: @action + 1px;
    line-height: @action - 10px;
    background-color: white;
    top: 5px;

    &.-show {
      opacity: 1;
      visibility: visible;
    }

    a {
      transition: color, opacity .3s;
      color: @color;
      opacity: .5;

      &:hover, &:focus {
        opacity: 1;
        color: @BLUE;
      }
    }
  }
}
